<template>
  <div class="me">
    <div class="bj">
      <!-- 用户昵称头像部分 -->
      <div class="headbar">
        <img :src="this.img" />
        <div class="means">
          <span>{{ user.uname }}</span>
          <p>
            <span>{{ user.gender == 1 ? "男" : "女" }}</span
            >|
            <span>{{ user.area }}</span>
          </p>
        </div>
        <router-link to="/homepage"
          >修改资料<van-icon class="img" name="arrow" size="15px"
        /></router-link>
      </div>
      <div class="autograph">
        {{ user.autograph }}
      </div>
      <!-- 会员部分 -->
      <div class="mymember">
        <div class="left">
          <p><img src="../assets/logo2.png" />会员</p>
          <p>专享半价购，开卡送好礼！</p>
        </div>
        <router-link to="/opening" class="open">立即开通</router-link>
      </div>
    </div>
    <!-- 计划 -->
    <div class="plan">
      <van-grid :border="false">
        <van-grid-item
          icon="smile"
          text="我的报名"
          color="#bce0ff"
          to="/join"
        />
        <van-grid-item icon="todo-list" text="我的计划" to="/myplan" />
        <van-grid-item icon="bag" text="我的订单" to="order" />
        <van-grid-item icon="gift" text="我的福利" to="/welfare" />
      </van-grid>
    </div>
    <!-- 课程 -->
    <router-link to="/already">
      <div class="curriculum">
        <p>
          <span>我的关注</span>
          <span>···</span>
        </p>
        <div class="con">
          <div class="pic">
            <van-icon class="img" name="like" size="22px" color="#fff" />
          </div>
          <div class="right">
            <p>我关注的圈友</p>
            <p class="cont"><span>0</span>人</p>
          </div>
        </div>
      </div>
    </router-link>
    <tabbar></tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      user: [],
      img: "",
      uname:"",
      phone:"",
    };
  },
  methods: {
    show() {
      this.axios.get("/user/checkuid/" + this.uid).then((result) => {
        this.user = result.data.data;
        let imgPath = this.user.avatar;
        this.img = "/" + imgPath;
        // this.img = require("../../public/" + imgPath);
      });
    },
  },
  mounted() {
    this.show();
  },
};
</script>

<style>
.me {
  margin-bottom: 80px;
}
.me .bj {
  width: 100%;
  height: 210px;
  background-color: #bce0ff;
}
.me .information {
  text-align: right;
}
.me .information > .img {
  margin-right: 20px;
  margin-top: 10px;
}
.me .headbar {
  width: 90%;
  text-align: left;
  padding: 30px 0 10px 0;
  margin: 0 auto;
  border-radius: 30px;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
}
.me .means {
  width: 160px;
  line-height: 30px;
}
.me .means > :first-child {
  font-size: 18px;
}
.me .means > p > span {
  margin: 0 10px;
  color: #666;
}
.me .headbar > img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  border-radius: 30px;
}
.me .headbar > span {
  font-size: 18px;
  margin-left: 10px;
  line-height: 50px;
}
.me .headbar > a {
  font-size: 16px;
  float: right;
  color: #666;
}
.me .headbar > a > .img {
  margin-left: 5px;
  margin-top: 13px;
}
.me .autograph {
  width: 90%;
  margin: 10px auto;
  text-align: left;
  color: #666;
  margin-bottom: 20px;
}

.me .badge {
  display: inline-block;
  line-height: 20px;
  margin-left: 60px;
  margin-top: -5px;
  padding: 3px 8px 0 5px;
  border-radius: 20px;
  background-color: rgb(153, 153, 153, 0.3);
}
.me .badge > .img {
  vertical-align: text-bottom;
}
.me .badge > span {
  font-size: 16px;
  color: #999;
}
.me .mymember {
  width: 80%;
  position: fixed;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
  top: 25%;
  left: 50%;
  transform: translate(-50%, 0);
  background-image: linear-gradient(#7e7185, #63566a);
}
.me .left {
  text-align: left;
  font-size: 14px;
  color: #eee;
}
.me .left > p > img {
  width: 70px;
}
.me .mymember .open {
  width: 80px;
  height: 34px;
  border-radius: 50px;
  background-image: linear-gradient(
    240deg,
    rgba(248, 176, 43),
    rgba(249, 204, 121)
  );
  text-align: center;
  border: none;
  display: block;
  color: #333;
  font-size: 14px;
  line-height: 34px;
}

.me .cumulative {
  width: 75%;
  margin: 0 auto;
  padding: 20px 30px;
  margin-top: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  background-color: rgb(0, 0, 0, 0.2);
}
.me .cumulative p {
  display: inline-block;
  font-size: 18px;
  margin-right: 10px;
}
.me .frequency span {
  font-weight: 600;
  margin-right: 5px;
  font-size: 20px;
}

.me .plan {
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
  margin-top: 10%;
}
.me .plan van-grid-item {
  padding: 0;
}

.me .curriculum {
  width: 80%;
  margin: 0 auto;
  text-align: left;
  border-radius: 10px;
  padding: 20px 20px;
  color: #333;
  background-color: #dedede;
}
.me .curriculum > p {
  font-size: 18px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.me .curriculum > p > :last-child {
  display: block;
  font-size: 24px;
  font-weight: 600;
  width: 50px;
  text-align: center;
  height: 30px;
}
.me .curriculum > .con {
  margin-top: 15px;
  margin-left: 10px;
  display: flex;
  justify-self: start;
}
.me .pic {
  width: 60px;
  height: 50px;
  text-align: center;
  line-height: 65px;
  border-radius: 10px;
  background-color: #007bff;
  box-shadow: 5px 3px 5px #999;
}
.me .right {
  margin-left: 20px;
}
.me .right > p {
  font-size: 16px;
  /* margin-bottom: 8px; */
}
.me .cont {
  font-size: 12px;
  margin-top: 10px;
}
</style>
